<template>
  <i-navBar title="" bgColor="trans" type="goods"></i-navBar>
  <view class="goods-detail">
    <!-- <i-skeleton type="single" singleWidth="100%" singleHeight="600rpx"></i-skeleton> -->
    <swiper
      :circular="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
      :previous-margin="30"
      :next-margin="30"
      class="swiper"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in swiperList"
        :key="index"
      >
        <image :src="item"></image>
      </swiper-item>
    </swiper>
    <view class="goods-bg">
      <view class="goods-bg-price">
        <text style="margin-bottom: 4rpx">￥</text>
        <text class="goods-bg-price-now">{{ goodsDetail.discountPrice }}</text>
        <text style="margin-bottom: 4rpx">优惠价</text>
      </view>
      <view class="goods-bg-price-old">原价 ￥{{ goodsDetail.oriPrice }}</view>
    </view>
    <i-card radius="2rpx">
      <view class="goods-categoryName">{{ goodsDetail.categoryName }}</view>
      <view class="goods-productName">{{ goodsDetail.productName }}</view>
    </i-card>
    <i-card radius="2rpx" top="16rpx" padding="24rpx 0">
      <view class="card-title">
        <image
          src="../../static/images/zs_icon.png"
          mode="widthFix"
          style="width: 32rpx; height: 32rpx; margin-right: 12rpx"
        ></image
        >商品详情
        <image
          src="../../static/images/zs_icon.png"
          mode="widthFix"
          style="width: 32rpx; height: 32rpx; margin-left: 12rpx"
        ></image>
      </view>
      <view class="goods-detail-content" v-html="goodsDetail.details"></view>
    </i-card>
  </view>
  <view class="goods-detail-footer">
    <view class="goods-detail-footer_body">
      <view class="goods-detail-footer_body-left">
        <text style="margin-right: 12rpx">购买数量</text>
        <i-stepNum v-model="shopNum"></i-stepNum>
      </view>
      <view class="goods-detail-footer_body-right">
        <view class="goods-detail-footer_body-right-price">
          <i-buttons
            radius="48rpx"
            bgColor="linear-gradient( 90deg, #FFB413 0%, #FF9A00 100%)"
            color="#fff"
            @click="handleBuy"
          >
            立即购买
          </i-buttons>
        </view>
      </view>
    </view>
  </view>

  <i-checkPay-modal
    :chcekPay="checkPay"
    @close="checkPay = false"
    @checkConfirm="checkConfirm"
  ></i-checkPay-modal>
  <i-loginModal></i-loginModal>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { createMallOrder, getProductDetail } from "../../api/index";
import useStore from "../../stores/index";
import { checkLogin } from "../../utils/common";

const swiperList = ref<any[]>([]);
const goodsDetail = ref<any>({});
const shopNum = ref<number>(1);
const checkPay = ref(false);
const password = ref("");
const disable = ref(false);

const store = useStore();

const userInfo = computed(() => {
  return store.userInfo;
});

const getProductDetailData = async (id: string) => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  const { data } = await getProductDetail(id);
  swiperList.value = [data.productMainPic];
  goodsDetail.value = {
    ...data,
    details: data.details ? decodeURIComponent(data.details) : "",
  };
  uni.hideLoading();
};

const handleBuy = async () => {
  await checkLogin();
  if (userInfo.value.userId) {
    if (
      shopNum.value * goodsDetail.discountPrice >
      userInfo.value.transferAmount
    ) {
      uni.showToast({
        title: "可转赠金额不足",
        icon: "none",
      });
      return;
    }
    if (!userInfo.value.address) {
      uni.showToast({
        title: "请先添加收货地址",
        icon: "none",
      });
      setTimeout(() => {
        uni.navigateTo({
          url: "/pages/views/take_address",
        });
      }, 1000);
      return;
    }
    checkPay.value = true;
  } else {
  }
  console.log("立即购买");
};

const checkConfirm = (pwd: string) => {
  console.log(pwd, "pwd");
  checkPay.value = false;
  password.value = pwd;
  goPay();
};

const goPay = async () => {
  if (disable.value) return;
  disable.value = true;
  try {
    await createMallOrder({
      productId: goodsDetail.value.id,
      num: shopNum.value,
    });
    store.setUserInfo();
    uni.showToast({
      title: "购买成功",
      icon: "none",
    });
  } catch (error) {
    console.log(error, "error");
  } finally {
    disable.value = false;
  }
};

onLoad((options: any) => {
  getProductDetailData(options.id);
});
</script>

<style lang="scss" scoped>
.goods-detail {
  margin: 0 auto;
  overflow: hidden;
  overflow: hidden;
  .swiper {
    width: 100%;
    height: 600rpx;
    .swiper-item {
      width: 100%;
      height: 600rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .goods-bg {
    width: 100%;
    height: 106rpx;
    background: url("../../static/images/goods_bg.png") no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin-bottom: 16rpx;

    .goods-bg-title {
      width: 100%;
      height: 100%;
    }
    .goods-bg-price {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      font-size: 22rpx;
      color: rgba(255, 255, 255, 0.9);
      font-family: PingFang SC, PingFang SC;
      .goods-bg-price-now {
        font-size: 48rpx;
        font-family: DIN Alternate, DIN Alternate;
        font-weight: bold;
        margin-right: 4rpx;
      }
      margin-right: 24rpx;
    }

    .goods-bg-price-old {
      font-size: 22rpx;
      color: rgba(255, 255, 255, 0.7);
      text-decoration-line: line-through;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      margin-top: 18rpx;
    }
  }
  .goods-categoryName {
    font-size: 28rpx;
    color: #000;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    margin-bottom: 16rpx;
  }
  .goods-productName {
    font-size: 24rpx;
    color: #666;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
  }
  .card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #000;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    margin-bottom: 32rpx;
  }
  ::v-deep(.goods-detail-content) {
    img {
      width: 100%;
      object-fit: cover;
      // height: 100%;
    }
  }
}
.goods-detail-footer {
  width: 100%;
  height: 100rpx;
  background: #fff;
  position: fixed;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  .goods-detail-footer_body {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    box-sizing: border-box;
  }
  .goods-detail-footer_body-left {
    font-size: 24rpx;
    color: #000;
    font-family: PingFang SC, PingFang SC;
    // font-weight: bold;
    @include flexR;
  }
}
</style>
